<template>
  <div>
    <a-card :bordered="false">
      <a-row>
        <a-col :sm="8" :xs="200">
          <head-info title="未处理入职申请" content="80人" :bordered="true"/>
        </a-col>
        <a-col :sm="8" :xs="24">
          <head-info title="本周入职申请" content="32人次" :bordered="true"/>
        </a-col>
        <a-col :sm="8" :xs="24">
          <head-info title="本周完成入职数" content="24人"/>
        </a-col>
      </a-row>
    </a-card>

    <a-card
      style="margin-top: 24px"
      :bordered="false"
      title="入职申请列表">

      <div slot="extra">
        <a-radio-group v-model="status">
          <a-radio-button value="all">全部</a-radio-button>
          <a-radio-button value="processing">进行中</a-radio-button>
          <a-radio-button value="waiting">等待中</a-radio-button>
        </a-radio-group>
        <a-input-search style="margin-left: 16px; width: 272px;" />
      </div>

      <!-- <div class="operate">
        <a-button type="dashed" style="width: 100%" icon="plus" @click="$refs.taskForm.add()">添加</a-button>
      </div> -->

      <a-list :loading="loading" :columns="columns" size="large" :pagination="{showSizeChanger: true, showQuickJumper: true, pageSize: 1, total: 1}">
        <a-list-item :key="index" v-for="(item, index) in data">
          <a-list-item-meta :description="item.description">
            <a-avatar slot="avatar" size="large" shape="square" :src="item.avatar"/>
            <a slot="title">{{ item.name }}</a>
          </a-list-item-meta>
          <div slot="actions">
            <a @click="() => add(item.id)">查看</a>
            <a-divider type="vertical" />
            <a-dropdown>
              <a-menu slot="overlay">
<!--                <a-menu-item v-if="item.state == 0"><a>否决</a></a-menu-item>-->
                <a-menu-item @click="del(item)"><a>删除</a></a-menu-item>
              </a-menu>
              <a>更多<a-icon type="down"/></a>
            </a-dropdown>
          </div>
          <div class="list-content">
            <div class="list-content-item">
              <span>申请人</span>
              <p>{{ item.applicant }}</p>
            </div>
            <div class="list-content-item">
              <span>开始时间</span>
              <p>{{ item.time }}</p>
            </div>
            <div class="list-content-item">
              <a-progress
                class="progress"
                :percent="progree(item.step)"
                :status="item.state | progress" />
            </div>
          </div>
        </a-list-item>
      </a-list>
      <task-form ref="taskForm" />
    </a-card>
  </div>
</template>

<script>
import HeadInfo from '@/components/tools/HeadInfo'
import TaskForm from '@/modules/doctor/TaskForm'
import { getDoctorEntry } from '@/api/doctorEntry'
import { departmentFilter, doctorLevelFilter } from '@/dictionary'
import { delDoctorEntry } from '../../api/doctorEntry'
const data = []
const columns = [{
  title: '姓名',
  dataIndex: 'name',
  align: 'center',
  scopedSlots: { customRender: 'name' }
}, {
  title: '年龄',
  dataIndex: 'age',
  align: 'center',
  scopedSlots: { customRender: 'age' }
}, {
  title: '性别',
  dataIndex: 'gender',
  align: 'center',
  scopedSlots: { customRender: 'gender' },
  customRender: (gender) => gender === 0 ? '男' : '女'
},
{
  title: '电话号码',
  dataIndex: 'phone',
  align: 'center',
  scopedSlots: { customRender: 'phone' }
}, {
  title: '部门',
  dataIndex: 'department',
  align: 'center',
  scopedSlots: { customRender: 'department' },
  customRender: departmentFilter
}, {
  title: '职级',
  dataIndex: 'level',
  align: 'center',
  scopedSlots: { customRender: 'level' },
  customRender: doctorLevelFilter
}, {
  title: '操作',
  dataIndex: 'action',
  scopedSlots: { customRender: 'action' },
  align: 'center'
}]
export default {
  name: 'DoctorManagement',
  components: {
    HeadInfo,
    TaskForm
  },
  data () {
    return {
      columns,
      data,
      status: 'all',
      loading: true
    }
  },
  filters: {
    progress (value) {
      switch (value) {
        case 0: return 'active'
        case 1: return 'success'
        case 2: return 'exception'
      }
    }
  },
  methods: {
    add (id) {
      this.$router.push('/doctor/advanced?id=' + id)
    },
    progree (state) {
      switch (state) {
        case 0: return 0
        case 1: return 25
        case 2: return 50
        case 3: return 75
        case 4: return 100
        default: return 0
      }
    },
    del (row) {
      const _this = this
      this.$confirm({
        title: '警告',
        content: `真的要删除 ${row.name} 吗?`,
        okText: '删除',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          const index = _this.getArrayIndex(_this.data, row)
          delDoctorEntry(row.id).then(res => {
            console.log('delete:', row)
            _this.data.splice(index, 1)
          }).catch(res => {})
        },
        onCancel () {}
      })
    },
    getArrayIndex (arr, obj) {
      let i = arr.length
      while (i--) {
        if (arr[i] === obj) {
          return i
        }
      }
      return -1
    }
  },
  created () {
    getDoctorEntry().then(res => {
      console.log('res', res)
      this.data = res.result
      console.log('data:', this.data)
      this.loading = false
    }).catch(res => {
      this.loading = false
    })
  }
}
</script>

<style lang="less" scoped>
  .ant-avatar-lg {
    width: 48px;
    height: 48px;
    line-height: 48px;
  }

  .list-content-item {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-left: 40px;
    span {
      line-height: 20px;
    }
    p {
      margin-top: 4px;
      margin-bottom: 0;
      line-height: 22px;
    }
  }

  .progress {
    width: 180px;
  }
</style>
